<!--
 *Author：jxx
 *Date：{Date}
 *Contact：283591387@qq.com
 *业务请在@/extension/mes/mes/MaterialUsedList.jsx或MaterialUsedList.vue文件编写
 *新版本支持vue或【表.jsx]文件编写业务,文档见:https://doc.volcore.xyz/docs/view-grid、https://doc.volcore.xyz/docs/web
 -->
<template>
  <div class="grid">
    <view-grid ref="grid" :columns="columns" :detail="detail" :details="details" :editFormFields="editFormFields"
      :editFormOptions="editFormOptions" :searchFormFields="searchFormFields" :searchFormOptions="searchFormOptions"
      :table="table" :extend="extend" :onInit="onInit" :onInited="onInited" :searchBefore="searchBefore"
      :searchAfter="searchAfter" :addBefore="addBefore" :updateBefore="updateBefore" :rowClick="rowClick"
      :delBefore="delBefore" :modelOpenBefore="modelOpenBefore" :modelOpenAfter="modelOpenAfter" :delAfter="delAfter">
      <!-- 自定义组件数据槽扩展，更多数据槽slot见文档 -->
      <template #gridHeader>
      </template>
      <template #gridFooter>
        <div class="materialUsedListDetail">
          <materialUsedListDetail ref="materialUsedListDetailRef"></materialUsedListDetail>
        </div>
      </template>
    </view-grid>
  </div>
  <!-- 明细表选择物料 -->
  <select-material ref="materialRef" @onSelect="onSelectMaterial"></select-material>
  <!-- 选择生产任务(选择数据) -->
  <select-productTask ref="productTaskRef" @onSelectProductTask="onSelectProductTask"></select-productTask>
  <!-- 选择产品(选择数据) -->
  <select-product ref="productRef" @onSelectProduct="onSelectProduct"></select-product>
</template>
<script setup lang="jsx">
import materialUsedListDetail from './MaterialUsedListDetail.vue'
import extend from "@/extension/mes/mes/MaterialUsedList.jsx";
import viewOptions from './MaterialUsedList/options.js'
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
import selectMaterial from './MaterialUsedListSelectMaterial.vue';
import selectProductTask from './MaterialUsedListSelectProductTask.vue';
import selectProduct from './MaterialUsedListSelectProduct.vue';

const grid = ref(null);
const { proxy } = getCurrentInstance()
//http请求，proxy.http.post/get
const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())
const materialUsedListDetailRef = ref();
const materialRef = ref();
const productTaskRef = ref();
const productRef = ref();

let gridRef;//对应[表.jsx]文件中this.使用方式一样
//生成对象属性初始化
const onInit = async ($vm) => {
  gridRef = $vm;
  gridRef.load = true
  //与jsx中的this.xx使用一样，只需将this.xx改为gridRef.xx
  //更多属性见：https://doc.volcore.xyz/docs/view-grid

  proxy.base.setItem('getMaterialUsedSelectRow', () => {
    return gridRef.getTable(true).getSelected();
  })

  //设置弹出框编辑宽度
  //gridRef.boxOptions.width = 1100
  //启用明细表排序
  gridRef.detailOptions.sortable = true

  gridRef.detailOptions.pagination.sortName = "MaterialUsedListDetailId";  //明细表排序字字段
  gridRef.detailOptions.pagination.order = "asc"; //明细表排序方式desc或者asc

  const productTaskOption = gridRef.getFormOption("ProductTaskNo");
  productTaskOption.readonly = true;
  productTaskOption.extra = {
    icon: 'el-icon-zoom-out', //显示图标
    text: '选择', //显示文本
    style: 'color: #3a8ee6;font-size: 13px;cursor: pointer;',
    //触发事件
    click: (item) => {
      productTaskRef.value.open();
    }
  };

  const productOption = gridRef.getFormOption("MaterialNo");
  productOption.readonly = true;
  productOption.extra = {
    icon: 'el-icon-zoom-out', //显示图标
    text: '选择', //显示文本
    style: 'color: #3a8ee6;font-size: 13px;cursor: pointer;',
    //触发事件
    click: (item) => {
      productRef.value.open();
    }
  };
}
//生成对象属性初始化后,操作明细表配置用到
const onInited = async () => {
  columns.forEach(x => {
    //开启表头过滤
    x.filterData = true;
  })

  gridRef.search()

  gridRef.height = gridRef.height - 310;

  if (gridRef.height < 200) {
    gridRef.height = 200;
  }

  //明细表行数据物料编码设置弹出框选择数据
  detail.columns.forEach((x) => {
    if (x.field == 'MaterialNo') {
      x.render = (h, { row, column, index }) => {
        x.edit = null;//设置当前字段不可编辑
        return (
          <div>
            <el-button link
              onClick={($e) => {
                $e.stopPropagation();
                //触发事件
                materialRef.value.open(row)
              }}
              class="el-icon-search"
              style="color: #2196F3;cursor: pointer;"
            ></el-button>
            <span style="margin-left:5px">{row.MaterialNo}</span>
          </div>
        );
      };
    }
  })

}

//表格回写事件
const onSelectMaterial = (row) => {
  console.log('表格回写事件')
}

//选择生产任务回调
const onSelectProductTask = (rows) => {
  editFormFields.ProductTaskId = rows[0].ProductTaskId;
  editFormFields.ProductTaskNo = rows[0].BillNo;
  editFormFields.ProductPlanNo = rows[0].ProductPlanNo;
  editFormFields.DepartmentId = rows[0].DepartmentId;
  editFormFields.Remark = rows[0].Remark;
  //这里还可以给其他字段设置值editFormFields.字段=
}
// 选择产品回调
const onSelectProduct = (rows) => {
  editFormFields.MaterialId = rows[0].MaterialId;
  editFormFields.MaterialNo = rows[0].Code;
  editFormFields.MaterialName = rows[0].Name;
  editFormFields.Spec = rows[0].Spec;
  editFormFields.MaterialTypeId = rows[0].MaterialTypeId;
}

const searchBefore = async (param) => {
  //界面查询前,可以给param.wheres添加查询参数
  //返回false，则不会执行查询
  return true;
}
const searchAfter = async (rows, result) => {
  materialUsedListDetailRef.value.$refs.grid.clearSelection();
  return true;
}
const addBefore = async (formData) => {
  //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
  return true;
}
const updateBefore = async (formData) => {
  //编辑保存前formData为对象，包括明细表、删除行的Id
  return true;
}
const delBefore = (ids, rows) => { //查询界面的表删除前 ids为删除的id数组,rows删除的行
  let isDeleted = true
  rows.forEach(row => {
    if (row.AuditStatus != 0 && row.AuditStatus != null) {
      isDeleted = false
      proxy.$message.error(row.BillNo + "已审核不允许删除！");
      return isDeleted;
    }
  });
  return isDeleted;//返回false，界面上不会显示
}
const delAfter = async () => {//查询界面的表删除后
  //加载明细表
  materialUsedListDetailRef.value.$refs.grid.search();
  return true;//同上
}
const rowClick = ({ row, column, event }) => {
  //查询界面点击行事件
  // grid.value.toggleRowSelection(row); //单击行时选中当前行;

  //点击行清除选中的行(用于下面明细表判断)
  grid.value.clearSelection();
  //点击行默认选中
  grid.value.toggleRowSelection(row); //单击行时选中当前行;
  //加载明细表
  materialUsedListDetailRef.value.$refs.grid.search();
}
const modelOpenBefore = async (row) => {//弹出框打开后方法
  return true;//返回false，不会打开弹出框
}
const modelOpenAfter = (row) => {

  //弹出框打开后方法,设置表单默认值,按钮操作等
  gridRef.setFormReadonly(false);

  if (gridRef.currentAction == 'Add') {
    gridRef.editFormFields.BillDate = proxy.base.getDate()
    gridRef.boxButtons.forEach((btn) => {
      if (btn.name == '保存') {
        btn.hidden = false;
        //或者设置只读
        // btn.readonly = true;
      }

    });
  }
  else {
    if (row.AuditStatus != 0 && row.AuditStatus != null) {
      gridRef.setFormReadonly(true);
      gridRef.boxButtons.forEach((btn) => {
        if (btn.name == '保存') {
          btn.hidden = true;
          //或者设置只读
          // btn.readonly = true;
        }
      });
    }
    else {
      gridRef.boxButtons.forEach((btn) => {
        if (btn.name == '保存') {
          btn.hidden = false;
          //或者设置只读
          // btn.readonly = true;
        }
      });
    }
  }

}
//监听表单输入，做实时计算
//watch(() => editFormFields.字段,(newValue, oldValue) => {	})
//对外暴露数据
defineExpose({})
</script>
